<template>
    <div>
        <div class="title">账号详情</div>
        <el-button @click="() => { router.push('/') }">返回</el-button>
        <div style="margin-top: 10px;" v-if=flag>
            <el-form :model="form" ref="ruleFormRef" disabled>
                <el-form-item label="商户类型" prop="category">
                    <el-select v-model="form.category" class="m-2" placeholder="请选择商户类型" size="large">
                        <el-option v-for="item in merchantType" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择联防" prop="pid">
                    <el-select v-model="form.pid" class="m-2" placeholder="请选择派出所" size="large">
                        <el-option v-for="item in form.pid" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商户名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入商户名称" style="width:220px;height: 35px;" />
                </el-form-item>
                <div style="display: flex;">
                    <el-form-item label="商户位置" prop="city">
                        <el-cascader v-model="form.city" :options="cityList" placeholder="请选择地区" :props="{ value: 'value' }"
                            ref="citycascader" disabled />
                    </el-form-item>
                    <el-form-item :inline="true">
                        <el-select v-model="form.community" placeholder="请选择联防社区">
                            <el-option v-for="item in form.community" :key="item.id" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="location" :inline="true">
                        <el-autocomplete v-model="form.location" class="inline-input w-50" placeholder="请输入详细地址" />
                    </el-form-item>
                </div>
                <el-form-item label="">
                    <div class="map">
                        <baidu-map class="baidumap" style="overflow:auto" :center="mapCenter" :dragging="false" :zoom="16"
                            @ready="fn1">
                            <bm-marker :position="mapMarke" animation="BMAP_ANIMATION_BOUNCE">
                            </bm-marker>
                        </baidu-map>
                    </div>
                </el-form-item>
                <el-form-item label="选择状态" prop="status">
                    <el-select v-model="form.status" placeholder="选择状态" size="large">
                        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div v-else="flag">
            <el-form :model="policeForm" ref="formRef" disabled>
                <el-form-item label="派出所名称" prop="name">
                    <el-input v-model="policeForm.name" placeholder="派出所名称" style="width:220px;height: 35px;" />
                </el-form-item>
                <div style="display: flex;">
                    <el-form-item label="派出所位置" prop="region_code">
                        <el-cascader v-model="policeForm.region_code" :options="cityList" placeholder="请选择区域"
                            :props="{ value: 'value' }" ref="citycascader" />
                    </el-form-item>
                    <el-form-item prop="location">
                        <el-autocomplete v-model="policeForm.location" clearable class="inline-input w-50"
                            placeholder="请输入详细地址或派出所名称" style="width: 300px;" />
                    </el-form-item>
                </div>
                <el-form-item label=" ">
                    <div class="map">
                        <baidu-map class="baidumap" style="overflow:auto" :center="mapCenter1" :dragging="false" :zoom="16"
                            @ready="fn1">
                            <bm-marker :position="mapMarke1" animation="BMAP_ANIMATION_BOUNCE">
                            </bm-marker>
                        </baidu-map>
                    </div>
                </el-form-item>
                <el-form-item label="选择状态">
                    <el-select v-model="policeForm.status" class="m-2" placeholder="选择状态" size="large">
                        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <div v-for="(item, i) in policeForm.communities" style="display: flex;" :key="i">
                    <el-form-item label="管辖社区" :prop="'communities.' + [i] + '.name'" :rules="{
                        required: true,
                        message: '123123123',
                        trigger: 'blur',
                    }">
                        <el-input v-model="item.name" placeholder="管辖社区" style="width:220px;height: 35px;" />
                    </el-form-item>
                    <el-form-item label="额定摄像头" :prop="'communities.' + [i] + '.rated'" :rules="{
                        required: true,
                        message: '123123123',
                        trigger: 'blur',
                    }" style="margin-left: 25px;">
                        <el-input v-model.number="item.rated" placeholder="额定摄像头" style="width:220px;height: 35px;" />
                        <el-button type="primary">{{ i === 0 ? '增加' : '删除' }}</el-button>
                    </el-form-item>
                </div>

            </el-form>
        </div>
        <el-form :model="policeForm" disabled>
            <el-form-item label="AI授权">
                <div style="display: flex;">
                    <el-tree ref="treeRef" v-for="(item, i) in test" :data="item" show-checkbox default-expand-all
                        node-key="code" highlight-current :props="{
                            children: 'child',
                            label: 'name',
                        }" :height="208" style="margin-right: 20px;" @check="fn" :default-checked-keys="defaultKes" />
                </div>
            </el-form-item>
        </el-form>
        <el-form :model="formData" label-width="80px" label-position="left" ref="ruleFormRef" style="width: 500px;"
            status-icon disabled>
            <el-form-item label="联系人" prop="real_name">
                <el-input v-model="formData.real_name" />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model="formData.phone" />
            </el-form-item>
            <el-form-item label="设置账号" prop="username">
                <el-input v-model="formData.username" />
            </el-form-item>
            <el-form-item label="设置密码" prop="password">
                <el-input v-model="formData.password" type="password" show-password />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="formData.remark" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { cityList } from './ciytdata/cityList'
import { useRouter, useRoute } from 'vue-router';
import { getUseDetails, getPermissions } from '../../api/index'
import { useAddDataStore } from '../../store/useAddDataStore'
const formStore = useAddDataStore()
const mapCenter = ref({ lng: 116.404, lat: 39.915 })
const mapCenter1 = ref({ lng: 116.404, lat: 39.915 })
const mapMarke = ref({ lng: 116.404, lat: 39.915 })
const mapMarke1 = ref({ lng: 116.404, lat: 39.915 })
const defaultKes = ref<any>()
const router = useRouter()
const route = useRoute()
const test = ref<any>([])
const flag = ref<boolean>(true)
const fn = (bol: boolean) => {
    flag.value = bol
}
const fn1 = () => {
    if (Number(route.query.category) === 0 || Number(route.query.category) === 2) {
        mapCenter1.value = policeForm.value.point
        mapMarke1.value = policeForm.value.point
        console.log('1');

    } else {
        mapCenter.value = form.value.point
        mapMarke.value = form.value.point
        console.log('2');
    }


}
interface RuleForm {
    real_name: string
    phone: string
    username: string
    password: string
    remark?: string
}
const formData = ref<RuleForm>({
    real_name: '',
    phone: '',
    username: '',
    password: '',
    remark: '',
})
const state = [{
    label: '启用',
    value: 1,
}, {
    label: '禁用',
    value: 2,
}]



const form = ref<any>({
})
const policeForm = ref<any>({
})

const merchantType = [
    {
        value: 0,
        label: '派出所',
    },
    {
        value: 1,
        label: '社区',
    },
    {
        value: 2,
        label: '派出所',
    },
    {
        value: 3,
        label: '酒店',
    },
    {
        value: 5,
        label: '学校',
    },
    {
        value: 9,
        label: '工厂',
    },
    {
        value: 7,
        label: 'KTV',
    },
]

const getData = async () => {
    let res = await getPermissions()
    test.value = res.data.data.map((item: any) => {
        return [item]
    })
}
onMounted(async () => {
    getData()
    let res = (await getUseDetails({ id: route.query.id })).data.data
    // 判断是派出所还是商户
    if (Number(route.query.category) === 0 || Number(route.query.category) === 2) {
        flag.value = false
        policeForm.value = {
            name: res.name,
            location: res.location,
            point: res.point,
            status: res.status,
            communities: res.communities.map((item: any) => {
                return {
                    name: item.name,
                    id: item.id,
                    rated: item.camera_rated
                }
            })
        }
        formData.value = {
            real_name: res.Administrator.real_name,
            phone: res.Administrator.phone,
            username: res.Administrator.username,
            password: '',
            remark: res.Administrator.remark,
        }
        defaultKes.value = res.PermissionCodes
        let num = res.region_code.slice(0, 3)
        let num1 = res.region_code.slice(0, 4)
        let num2 = res.region_code
        if (num === '110' || num === '120' || num === '310' || num === '500') {
            policeForm.value.region_code = [num + '000', num2]
        } else {
            policeForm.value.region_code = [num + '000', num1 + '00', num2]
        }
    } else {
        form.value = {
            category: Number(res.category),
            pid: [],
            name: res.name,
            city: [],
            community: [res.Community.name],
            location: res.location,
            status: res.status,
            point: res.point
        }
        defaultKes.value = res.PermissionCodes
        formData.value = {
            real_name: res.Administrator.real_name,
            phone: res.Administrator.phone,
            username: res.Administrator.username,
            password: '',
            remark: res.Administrator.remark,
        }
        let res1 = (await getUseDetails({ id: res.pid })).data.data
        form.value.pid = [res1.name]
        let num = res.region_code.slice(0, 3)
        let num1 = res.region_code.slice(0, 4)
        let num2 = res.region_code
        if (num === '110' || num === '120' || num === '310' || num === '500') {
            form.value.city = [num + '000', num2]
        } else {
            form.value.city = [num + '000', num1 + '00', num2]
        }
    }
})
</script>
<style scoped lang='less'>
.title {
    height: 30px;
    line-height: 25px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

/deep/.el-tree {
    background: transparent;
}

.map {
    width: 100%;
    height: 500px;
}

.baidumap {
    width: 100%;
    height: 100%;

    /deep/ .anchorBL {
        display: none !important;
    }

}
</style>